<template id="courseType">
    <div>
        <el-row style="height: 100%;border: 1px solid #DCDFE6;margin-top: 10px">
            <el-col :span="6" style="border-right: 1px solid #DCDFE6; min-height:500px;">
                <div class="grid-content bg-purple">
                    <el-tree :data="courseTypes" :props="defaultProps" @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </el-col>
            <el-col :span="17" style="margin-left: 10px;padding-top: 10px">
                <!--工具条-->
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filters">
                        <el-form-item>
                            <el-input v-model="filters.keywords" placeholder="关键字"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getList">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleAdd">新增</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>

                <!--列表-->
                <el-table :data="datas" highlight-current-row @selection-change="selsChange" style="width: 100%;">
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="name" label="标题" width="120" sortable>
                    </el-table-column>
                    <el-table-column prop="logo" label="LOGO" width="120" sortable>
                    </el-table-column>
                    <el-table-column prop="description" label="描述" width="120" sortable>
                    </el-table-column>
                    <el-table-column prop="totalCount" label="课程数量" width="120" sortable>
                    </el-table-column>

                    <el-table-column label="操作" width="150">
                        <template scope="scope">
                            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDel( scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--工具条-->
                <el-col :span="24" class="toolbar">
                    <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
                </el-col>
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="3"
                               :total="total" style="float:right;">
                </el-pagination>

            </el-col>
        </el-row>

        <!--新增界面-->
        <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px" ref="addForm">
                <el-form-item label="分类标题" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="LOGO" prop="logo">
                    <el-input v-model="addForm.logo" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="排序" prop="sortIndex">
                    <el-input v-model="addForm.sortIndex" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="addForm.description" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程类型" prop="coursetTypId">
                    <el-cascader
                            :props="courseTypeProps"
                            v-model="addForm.courseTypeId"
                            placeholder="试试搜索：指南"
                            :options="courseTypes"
                            expand-trigger="hover"
                            :show-all-levels="false"
                            filterable
                            change-on-select
                    ></el-cascader>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                courseTypeProps: {
                    value: "id",
                    label: "name"
                },
                addForm: {
                    path: "",
                    courseTypeId: "",
                    name: "",
                    logo: "",
                    sortIndex: "",
                    description: "",
                    pid: 0,
                },
                addFormVisible: false,
                sels: [],
                filters: {
                    keywords: ""
                },
                page: 1,//当前页,要传递到后台的
                total: 0, //分页总数
                datas: [],
                courseTypes: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods: {
            handleAdd() {
                this.addFormVisible = true;
                //清空表单
                for (let i in this.addForm) {
                    // console.log(addFormKey)
                    this.addForm[i] = ""
                }

            },
            addSubmit() {
                console.log(this.addForm)
                this.addForm.pid = this.addForm.courseTypeId[this.addForm.courseTypeId.length - 1]
                this.addForm.path = this.addForm.courseTypeId.toString().replace(",", ".")
                //提交
                this.$http.put("/course/courseType", this.addForm).then(res => {
                    //{success: true, ..
                    var ajaxResult = res.data;
                    if (ajaxResult.success) {
                        this.addFormVisible = false;
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.getTreeData();
                    } else {
                        this.$message({
                            message: ajaxResult.message,
                            type: 'error'
                        });
                    }
                });
            },
            getChildrenByPid(pid) {
                this.$http.post("/course/courseType/children/" + pid).then(res => {
                    console.log("=================")
                    console.log(res)
                    this.datas = res.data;
                    this.total = res.data.total;
                });
                // return;
                //这种方式有问题
                /* for (var i = 0 ; i < this.courseTypes.length ;i++){
                     var current =  this.courseTypes[i];
                     if(current.id == pid){
                         return current.children;
                     }
                 }*/
                // return [];
            },
            handleCurrentChange(curentPage) {
                this.page = curentPage;
                this.getHighChildrenByPid();
            },
            batchRemove() {

            },
            handleEdit(row) {
                console.log(row)
                this.addForm.id = row.id;
                //回显
                for (let x in this.addForm) {
                    this.addForm[x] = row[x]
                }
                this.addFormVisible = true;
                this.addSubmit()
            },
            handleDel(row) {
                console.log(row)
                this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//确认
                    this.$http.delete("/course/courseType/" + row.id).then(res => {
                        console.log(res);
                        let {message, success} = res.data; //解构函数
                        if (success) {
                            this.$message({
                                message: message,
                                type: 'success'
                            });
                            this.getTreeData()
                        }
                    })
                }).catch(() => {
                    this.$message('已经取消');
                })
            },
            selsChange() {

            },
            //点击查询
            getHighChildrenByPid() {
                let para = {
                    "page": this.page,
                    "rows": 3,
                    "keyword": this.filters.keywords,
                    "pid": this.addForm.pid
                };
                this.$http.post("/course/courseType/highChildren", para).then(res => {
                    // console.log(res)
                    this.datas = res.data.rows;
                    this.total = res.data.total;
                });
            },
            getList() {
                this.getHighChildrenByPid()
            },
            handleNodeClick(row) {
                // this.datas = row.children;
                this.addForm.pid = row.id;
                this.getHighChildrenByPid()
                // this.total=row.children.length;
            },
            getTreeData() {
                // 发送一个异步请求: get请求 /product/courseType/treeData
                this.$http.get("/course/courseType/queryTree").then(res => {
                    console.log(res);
                    this.courseTypes = res.data
                });
            }
        },
        mounted() {
            //对courseTypes数据赋值
            this.getTreeData();
        }
    };
</script>
<style>
    .el-row {
        margin-bottom: 20px;
        height: 100%;
    }

    :last-child {
        margin-bottom: 0;
    }

    #courseType el-col {
        border: 1px solid red;
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
</style>
